import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:leader_help/page/home/key_think_tank/key_think_tank_rank_detail/key_think_tank_detail_view.dart';
import 'package:leader_help/utils/component/component.dart';
import 'package:leader_help/value/topcolors.dart';

import 'key_think_tank_rank_logic.dart';

class KeyThinkTankRankPage extends StatefulWidget {
  const KeyThinkTankRankPage({Key? key}) : super(key: key);

  @override
  _KeyThinkTankRankPageState createState() => _KeyThinkTankRankPageState();
}

class _KeyThinkTankRankPageState extends State<KeyThinkTankRankPage> {
  final logic = Get.put(KeyThinkTankRankLogic());
  final state = Get.find<KeyThinkTankRankLogic>().state;

  late List<Widget> widgets = [
     for (final tab in state.tabss) const ThinkTankRankListItem(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: detailAppBar(context, title: "智库排行榜",
          actions: [
            Container(
              margin: EdgeInsets.only(right: 10.r),
              child: InkWell(
                child: Row(
                  children: [
                    const Icon(Icons.search_outlined, size: 18, color: Colors.white,),
                    SizedBox(width: 2.r,),
                    const Text("搜索", style: TextStyle(color: Colors.white, fontSize: 15),),
                  ],
                ),
                onTap: () {

                },
              ),
            ),
          ]
      ),
      body: Column(
        children: [
          Material(
            color: Colors.white,
            child: TabBar(
              tabs: [for (final tab in state.tabs) Tab(text: tab,)],
              indicatorColor: TopColors.main_red,
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(2),
                  color: TopColors.main_red),
              indicatorPadding: const EdgeInsets.only(left: 20, right: 20, top: 40, bottom: 5),
              // 字体颜色
              labelColor: TopColors.main_red,
              labelStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              labelPadding: const EdgeInsets.only(left: 13, right: 13),
              // 没有选中字体颜色
              unselectedLabelColor: TopColors.black_33,
              unselectedLabelStyle: const TextStyle(fontSize: 15),
              // 是否滚动
              isScrollable: false,
              // 控制器
              controller: logic.controller,
              physics: const BouncingScrollPhysics(),
            ),
          ),
          Divider(height: 1, color: TopColors.gray_line,),
          Material(
            color: Colors.white,
            child: TabBar(
              tabs: [for (final tab in state.tabss) Tab(text: tab,)],
              indicatorColor: TopColors.main_red,
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(2),
                  color: TopColors.main_red),
              indicatorPadding: const EdgeInsets.only(left: 20, right: 20, top: 40, bottom: 5),
              // 字体颜色
              labelColor: TopColors.main_red,
              labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
              labelPadding: const EdgeInsets.only(left: 13, right: 13),
              // 没有选中字体颜色
              unselectedLabelColor: TopColors.black_33,
              unselectedLabelStyle: const TextStyle(fontSize: 15),
              // 是否滚动
              isScrollable: true,
              // 控制器
              controller: logic.controller1,
              physics: const BouncingScrollPhysics(),
            ),
          ),
          Expanded(
            child: TabBarView(
                controller: logic.controller1,
                children: widgets
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<KeyThinkTankRankLogic>();
    super.dispose();
  }
}

/// 智慧排行榜
class ThinkTankRankListItem extends GetView<KeyThinkTankRankLogic> {
  const ThinkTankRankListItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: EdgeInsets.zero,
        itemCount: controller.state.rxRankModel.length,
        itemBuilder: (BuildContext context, int index) {
          return ThinkTankRankItem(controller, index);
        }
    );
  }
}

///  智慧排行榜 Item
Widget ThinkTankRankItem(KeyThinkTankRankLogic controller, int index) {
  return InkWell(
    child: Container(
      margin: EdgeInsets.only(left: 5.r, right: 5.r, top: 8.r, bottom: 8.r),
      padding: EdgeInsets.only(left: 8.r, right: 8.r, top: 10.r, bottom: 10.r),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.r),
          color: Colors.white
      ),
      child: Row(
        children: [
          Text(controller.state.rxRankModel[index].id.toString(),
            style: TextStyle(color: index <= 2 ? TopColors.main_red : TopColors.black_33, fontSize: 28, fontWeight: FontWeight.w600),),
          SizedBox(width: 10.r,),
          Image.asset(controller.state.rxRankModel[index].icon, width: 56.r,),
          SizedBox(width: 10.r,),
          Flexible(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RichText(
                  text: TextSpan(
                      children: [
                        TextSpan(text: controller.state.rxRankModel[index].name, style: TextStyle(color: Color(0xff1977FF), fontSize: 16,),),
                        WidgetSpan(
                          child: Container(
                            margin: EdgeInsets.only(left: 10.r),
                            padding: EdgeInsets.only(left: 5.r, right: 5.r, top: 0.r, bottom: 2.r),
                            decoration: BoxDecoration(
                              color: Color(0xffF8D0D5),
                              border: Border.all(color: TopColors.main_red, width: 1),
                              borderRadius: BorderRadius.circular(2.r),
                            ),
                            child: Text(controller.state.rxRankModel[index].type, style: TextStyle(color: TopColors.main_red, fontSize: 11),),
                          ),
                        ),
                      ]
                  ),
                ),
                SizedBox(height: 5.r,),
                Text(controller.state.rxRankModel[index].content,
                  style: TextStyle(color: TopColors.black_33, fontSize: 13),
                  maxLines: 3,
                )
              ],
            ),
          )
        ],
      ),
    ),
    onTap: () {
      Get.to(const KeyThinkTankDetailPage());
    },
  );
}